<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AI 专家平台 - 登录</title>
    
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;500;700&display=swap" rel="stylesheet">
    
    <script src="https://cdn.tailwindcss.com"></script>
    
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    fontFamily: {
                        'sans': ['Noto Sans SC', 'sans-serif'],
                    },
                    colors: {
                        primary: {
                            'DEFAULT': '#4F46E5', // Indigo color for a more modern feel
                            'dark': '#4338CA'
                        },
                        gradient: {
                           start: '#6366F1', // Indigo-400
                           end: '#818CF8'  // Indigo-300
                        }
                    }
                }
            }
        }
    </script>

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">

    <style>
        .typewriter-cursor::after {
            content: '▋';
            animation: blink 0.7s infinite;
        }
        @keyframes blink {
            50% { opacity: 0; }
        }
    </style>
</head>
<body class="font-sans">

    <div class="grid grid-cols-1 md:grid-cols-2 min-h-screen">
        
        <!-- ==================== 左侧信息展示区 ==================== -->
        <div class="bg-slate-50 p-8 md:p-12 lg:p-16 flex flex-col">
            <!-- Slogan -->
            <header>
                <h1 class="text-4xl lg:text-5xl font-bold leading-tight bg-gradient-to-r from-primary to-violet-500 bg-clip-text text-transparent">
                    小朋友们的专属AI教师<br>与学习伙伴
                </h1>
                <p class="mt-4 text-lg text-slate-600">一站式聚合全球顶尖AI大模型，为教学与科研注入无限动力。</p>
            </header>

            <!-- 专家团队网格 -->
            <main class="my-12">
                <h2 class="text-xl font-semibold text-slate-800 mb-6">认识你的AI专家团队</h2>
                <div id="expert-grid" class="grid grid-cols-1 sm:grid-cols-2 gap-6">
                    <!-- 专家卡片会由JS动态生成并插入这里 -->
                </div>
            </main>

            <!-- 魔法时刻 (推至底部) -->
            <footer class="mt-auto">
                <h3 class="text-sm font-medium text-slate-500 mb-3">能力演示：</h3>
                <div id="magic-moment-container" class="w-full text-sm">
                    <div class="p-3 mb-2 max-w-[90%] rounded-lg rounded-bl-none bg-white border border-slate-200">
                        <span id="user-query" class="typewriter-cursor"></span>
                    </div>
                    <div class="p-3 max-w-[90%] rounded-lg rounded-br-none bg-primary text-white ml-auto">
                        <span id="ai-response" class="typewriter-cursor"></span>
                    </div>
                </div>
            </footer>
        </div>

        <!-- ==================== 右侧登录操作区 ==================== -->
        <div class="bg-white flex items-center justify-center p-8">
            <div class="w-full max-w-sm">
                <h2 class="text-3xl font-bold text-slate-800 mb-2">欢迎回来</h2>
                <p class="text-slate-500 mb-8">登录以继续探索AI的无限可能。</p>
                <form>
                    <div class="mb-4">
                        <label for="username" class="block text-slate-700 font-medium mb-2">用户名</label>
                        <input type="text" id="username" name="username" placeholder="请输入您的用户名或邮箱" class="w-full px-4 py-3 border border-slate-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/50 transition">
                    </div>
                    <div class="mb-6">
                        <label for="password" class="block text-slate-700 font-medium mb-2">密码</label>
                        <input type="password" id="password" name="password" placeholder="请输入您的密码" class="w-full px-4 py-3 border border-slate-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/50 transition">
                    </div>
                    <div class="flex items-center justify-between text-sm mb-8">
                        <div class="flex items-center">
                            <input type="checkbox" id="remember" class="h-4 w-4 text-primary focus:ring-primary border-slate-300 rounded">
                            <label for="remember" class="ml-2 text-slate-600">记住我</label>
                        </div>
                        <a href="#" class="font-medium text-primary hover:text-primary-dark">忘记密码?</a>
                    </div>
                    <button type="submit" class="w-full py-3 px-4 bg-primary text-white font-bold rounded-lg hover:bg-primary-dark transform hover:-translate-y-0.5 transition-all duration-300">
                        立即登录
                    </button>
                </form>
                <p class="text-center text-sm text-slate-600 mt-8">
                    还没有账户? <a href="#" class="font-medium text-primary hover:text-primary-dark">立即注册</a>
                </p>
            </div>
        </div>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', () => {
            const experts = [
                { icon: 'fa-solid fa-graduation-cap', color: '#6366F1', title: 'Gemini 2.5 Pro (博学的大学教授)', description: '知识渊博，逻辑严密。适合深度学术探讨、复杂问题推理。' },
                { icon: 'fa-solid fa-bolt', color: '#3B82F6', title: 'GPT-4o (全能的常春藤导师)', description: '反应迅捷，善于沟通。精通多模态对话，是你的全能日常助手。' },
                { icon: 'fa-solid fa-feather-pointed', color: '#EC4899', title: 'Claude 3 Opus (富有创造力的文学家)', description: '文笔优美，思想深刻。擅长长文写作、创意构思和伦理分析。' },
                { icon: 'fa-solid fa-microchip', color: '#10B981', title: 'DeepSeek-V3 (严谨的科研学者)', description: '代码与逻辑大师。专注于编程、数学和需要精确推理的任务。' }
            ];
            // 魔法时刻的数据源
            const scenarios = [
                { userQuery: '请帮我将这句话翻译成更学术的英文："这个研究很重要"。', aiResponse: 'Certainly. A more academic phrasing would be: "This research holds considerable significance within the field."' },
                { userQuery: '帮我设计一个关于“光合作用”的课堂互动问题。', aiResponse: '好的，可以试试这个：如果植物进行光合作用需要二氧化碳，为什么我们还要种树来减少二氧化碳呢？' },
                { userQuery: '这段Python代码为什么会报错: `for i in range(len(list)-1)`?', aiResponse: '这个错误很常见！`list` 是Python的关键字，不能用作变量名。另外，遍历列表时有更简洁的 `for item in my_list:` 写法。' },
                { userQuery: 'How can I order a coffee in English?', aiResponse: 'You can say: "Hi, could I get a large latte, please?" They might ask "For here or to go?"' }
            ];

            const expertGrid = document.getElementById('expert-grid');
            const userQueryEl = document.getElementById('user-query');
            const aiResponseEl = document.getElementById('ai-response');
            let currentScenarioIndex = 0;

            // 创建专家卡片并填充到网格
            function createExpertCards() {
                experts.forEach(expert => {
                    const card = document.createElement('div');
                    card.className = 'bg-white p-4 rounded-lg border border-slate-200 flex items-center gap-4 transition-all hover:border-primary hover:scale-105 duration-300';
                    card.innerHTML = `
                        <div class="flex-shrink-0 w-12 h-12 flex items-center justify-center rounded-lg text-white text-2xl" style="background-color: ${expert.color};">
                            <i class="${expert.icon}"></i>
                        </div>
                        <div>
                            <h4 class="font-semibold text-slate-800">${expert.title}</h4>
                            <p class="text-slate-500 text-sm">${expert.description}</p>
                        </div>
                    `;
                    expertGrid.appendChild(card);
                });
            }
            
            // 打字机效果函数
            function typeWriter(element, text, callback) {
                let i = 0; element.innerHTML = ''; const speed = 40;
                function type() { if (i < text.length) { element.innerHTML += text.charAt(i); i++; setTimeout(type, speed); } else if (callback) callback(); }
                type();
            }

            // 更新魔法时刻的对话内容
            function updateMagicMoment(index) {
                const scenario = scenarios[index];
                typeWriter(userQueryEl, scenario.userQuery, () => {
                    setTimeout(() => typeWriter(aiResponseEl, scenario.aiResponse), 300);
                });
            }

            // --- 初始化与定时器 ---
            createExpertCards();
            updateMagicMoment(currentScenarioIndex);
            setInterval(() => {
                currentScenarioIndex = (currentScenarioIndex + 1) % scenarios.length;
                updateMagicMoment(currentScenarioIndex);
            }, 7000);
        });
    </script>
</body>
</html>